<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px" class="back-icon" (click)="back()">
      <i lv-icon="aui-widget-datepicker-previous" [lvColorState]="true"></i>
      <h1>{{ (data ? 'system_modify_user_label' : 'system_create_user_label') | i18n }}</h1>
    </lv-group>
  </div>
  <div class="aui-block aui-paginator-container">
    <div class="content-container">
      <div class="aui-gutter-column-xl">
        <lv-wizard [lvMode]="'icon'" [lvStatus]="'process'" [lvActiveIndex]="stepIndex">
          <lv-wizard-step [lvDescription]="i18n.get('system_user_basic_information_detail_label')">
            {{'system_user_basic_information_label' | i18n}}
          </lv-wizard-step>
          <lv-wizard-step [lvDescription]="i18n.get('system_resource_auth_detail_label')">
            {{'system_resource_auth_label' | i18n}}{{'system_optional_label' | i18n}}
          </lv-wizard-step>
          <lv-wizard-step [lvDescription]="i18n.get('system_user_information_overview_label')">
            {{'common_summary_label' | i18n}}
          </lv-wizard-step>
        </lv-wizard>
      </div>

      <ng-container [ngSwitch]="stepIndex">
        <ng-container *ngSwitchCase="0">
          <lv-form [formGroup]="formGroup" [lvLabelColon]="false" class="formGroup aui-formGroup-v3">
            <div class="aui-gutter-column-l">
              <lv-form-item *ngIf="isOceanProtect" class="form-item-s">
                <lv-form-label lvRequired>
                  {{'common_user_type_label' | i18n}}
                </lv-form-label>
                <lv-form-control>
                  <lv-select *ngIf="!data" formControlName="userType" [lvOptions]="userTypeOptions" lvValueKey="value">
                  </lv-select>
                  <span *ngIf="data">{{formGroup.value.userType | textMap:'loginUserType'}}</span>
                </lv-form-control>
              </lv-form-item>
              <lv-form-item class="form-item-s">
                <lv-form-label lvRequired>
                  {{ 'common_name_label' | i18n }}
                </lv-form-label>
                <lv-form-control [lvErrorTip]="userNameErrorTip">
                  <input *ngIf="!data" [lv-tooltip]="nameToolTips" lvTooltipTrigger="focus" lvTooltipPosition="topLeft"
                         lvTooltipTheme="light" lv-input type="text" formControlName="userName" autocomplete="new-password" />
                  <span *ngIf="data">{{formGroup.value.userName}}</span>
                </lv-form-control>
              </lv-form-item>
            </div>
            <div class="aui-gutter-column-l" *ngIf="formGroup.value.userType === dataMap.loginUserType.local.value">
              <div class="formGroup-h1">{{'system_auth_info_label' | i18n}}</div>
              <!-- 登录方式 -->
              <div>
                <lv-form-item *ngIf="isOceanProtect" class="form-item-s">
                  <lv-form-label>
                    {{'common_login_method_label' | i18n}}
                    <i lv-icon="aui-icon-help" lv-tooltip="{{'system_login_method_help_label' | i18n}}" lvTooltipTheme="light"
                       class="configform-constraint" lvColorState='true'></i>
                  </lv-form-label>
                  <lv-form-control>
                    <lv-select formControlName="loginType" [lvOptions]="methodTypeOptions" lvValueKey="value">
                    </lv-select>
                    <ng-container *ngIf="isOceanProtect && formGroup.value.loginType === dataMap.loginMethod.email.value">
                      <p class="aui-text-help-sm" [innerHTML]="dynamicCodeHelp"></p>
                    </ng-container>
                  </lv-form-control>
                </lv-form-item>
              </div>
              <!-- 密码 -->
              <lv-form-item class="form-item-s" *ngIf="!data">
                <lv-form-label lvRequired>
                  {{ 'common_password_label' | i18n }}
                </lv-form-label>
                <lv-form-control [lvErrorTip]="baseUtilService.pwdErrorTip">
                  <aui-inupt-with-eye [lv-tooltip]="pwdComplexTipTpl" lvTooltipTrigger="focus" lvTooltipPosition="topLeft"
                                      lvTooltipTheme="light" formControlName="userPassword" [lvPasteAllowed]="false"></aui-inupt-with-eye>
                </lv-form-control>
              </lv-form-item>
              <!-- 确认密码 -->
              <lv-form-item class="form-item-s" *ngIf="!data">
                <lv-form-label lvRequired>{{ 'common_confirmpwd_label' | i18n }}</lv-form-label>
                <lv-form-control [lvErrorTip]="baseUtilService.pwdErrorTip">
                  <aui-inupt-with-eye formControlName="confirmPassword" [lvPasteAllowed]="false"></aui-inupt-with-eye>
                </lv-form-control>
              </lv-form-item>
            </div>
            <div class="formGroup-h1">{{'common_role_label' | i18n }}</div>
            <!-- 角色 -->
            <lv-alert lvType="info" lvClosable="false">
              {{'system_default_role_tip_label' | i18n}}
            </lv-alert>
            <div class="aui-operation">
              <lv-pro-button-group [config]="rolesOptsConfig" [bindData]="selectionData"></lv-pro-button-group>
            </div>
            <lv-pro-table #dataTable [config]="tableConfig" [data]="tableData"></lv-pro-table>
            <lv-form-item class="form-item-s">
              <lv-form-label lvRequired>{{ 'system_default_role_label' | i18n }}</lv-form-label>
              <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
                <lv-select [lvDisabled]="!!data" [lvOptions]="roleOptions" formControlName="roleId" lvValueKey="value"></lv-select>
              </lv-form-control>
            </lv-form-item>
            <div class="formGroup-h1">{{'system_other_information_label' | i18n}}</div>
            <!-- 收件人邮箱地址 -->
            <div *ngIf="isOceanProtect && formGroup.value.loginType === dataMap.loginMethod.email.value">
              <lv-form-item class="form-item-s">
                <lv-form-label lvRequired>{{ 'system_recipient_email_address_label' | i18n }}
                  <i lv-icon="aui-icon-help" lv-tooltip="{{'system_email_address_placeholder_label' | i18n}}"
                     lvTooltipTheme="light" class="configform-constraint" lvColorState="true"></i>
                </lv-form-label>
                <lv-form-control [lvErrorTip]="emailErrorTip">
                  <input lv-input formControlName="dynamicCodeEmail" />
                </lv-form-control>
              </lv-form-item>
            </div>
            <!-- 描述 -->
            <div>
              <lv-form-item class="form-item-s">
                <lv-form-label>{{ 'common_desc_label' | i18n }}</lv-form-label>
                <lv-form-control [lvErrorTip]="baseUtilService.lengthErrorTip">
                  <lv-input-lint>
          <textarea rows="3" maxlength="255" formControlName="description" lv-input style="resize: vertical;"
                    [lvAutosize]="{ minRows: 4, maxRows: 8 }"></textarea>
                  </lv-input-lint>
                </lv-form-control>
              </lv-form-item>
            </div>
            <!-- 用户最大连接数 -->
            <div *ngIf="formGroup.value.roleId !== '6'">
              <lv-form-item class="form-item-s">
                <lv-form-label>{{ 'system_user_maxconnections_label' | i18n }}
                </lv-form-label>
                <lv-form-control>
                  <lv-group>
                    <lv-form-control>
                      <lv-switch formControlName="sessionControl"></lv-switch>
                      <i lv-icon="aui-icon-help" lvTooltipTheme="light" lvTooltipPosition="bottom"
                         lv-tooltip="{{ 'system_maxconnection_tip_label' | i18n }}" class="configform-constraint"
                         lvColorState='true'></i>
                    </lv-form-control>
                  </lv-group>
                  <div></div>
                  <lv-group>
                    <lv-form-control *ngIf="formGroup.get('sessionControl').value" [lvErrorTip]="sessionErrorTip">
                      <input lv-input type="text" (blur)="sessionLimitBlur()" formControlName="sessionLimit" placeholder="1~8" />
                    </lv-form-control>
                  </lv-group>
                </lv-form-control>
              </lv-form-item>
            </div>
            <!-- 密码永不过期 -->
            <div *ngIf="formGroup.value.roleId === '7'">
              <lv-form-item>
                <lv-form-label>{{ 'system_password_no_time_limit_label' | i18n }}
                </lv-form-label>
                <lv-form-control>
                  <lv-switch formControlName="neverExpire"></lv-switch>
                  <div class="block-tips" *ngIf="formGroup?.value.neverExpire">
                    <i lv-icon="lv-icon-status-warning-info" lvColorState="true" class="type-icon icon-tips"></i>
                    <span class="form-tips">{{ 'system_password_no_time_limit_tips_label' | i18n }}</span>
                  </div>
                </lv-form-control>
              </lv-form-item>
            </div>
          </lv-form>
        </ng-container>

        <ng-container *ngSwitchCase="1">
          <aui-apply-resource [roleList]="roleList" [resourceSetMap]="resourceSetMap"
                              [formGroup]="formGroup" (invalidEmitter)="nextBtnDisabledCheck($event)">
          </aui-apply-resource>
        </ng-container>

        <ng-container *ngSwitchCase="2">
          <aui-user-detail-form [roleList]="roleList" [resourceSetMap]="resourceSetMap" [formGroup]="formGroup"></aui-user-detail-form>
        </ng-container>

      </ng-container >
    </div>

    <div class="bottom-btn-container">
      <lv-group lvGutter='16px' class="bottom-btn-group">
        <button lv-button (click)='back()'>{{ 'common_cancel_label' | i18n }}</button>
        <button *ngIf="stepIndex !== 0" lv-button (click)='previous()'>{{ 'common_previous_label' | i18n
          }}</button>
        <button *ngIf="stepIndex !== 2" lv-button lvType='primary' (click)='next()'
                [disabled]="nextBtnDisabled">
          {{'common_next_label' | i18n }}</button>
        <button *ngIf="stepIndex === 2" lv-button (click)='onOK()' lvType='primary'>{{'common_finish_label' | i18n }}</button>
      </lv-group>
    </div>
  </div>
</div>

<ng-template #pwdComplexTipTpl>
  <span [innerHTML]="pwdComplexTipLabel"></span>
</ng-template>

<ng-template #dpAdminTipTpl>
  <p class="aui-text-help-sm" [innerHTML]="openStorageGroupTip"></p>
</ng-template>